<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	
	<style type="text/css">

		.father{
			width: 500px;
			height: 20px;
			background: #888888 url() 0 0 no-repeat;
			margin: 100px auto;
			border-radius: 20px;
			overflow: hidden;
			position: relative;

		}
		.son{
			width: 500px;
			height: 20px;
			background: #FF7F27 url() 0 0 no-repeat;
			position: relative;
			left: -500px;
			/*border-radius: 20px;*/
		}
		.jindu{
			position: absolute;
			top: 0px;
			left: 50%;
			color: #FFC90E;
			font-size: 12px;
			line-height: 20px;

		}

	</style>
	<script type="text/javascript">
		$(function  () {
			$('#btn').click(function(event) {
				run()
			});

			function run () {
				
				$('.son').animate({left:'0px'}, 5000);
				time = setInterval(jiJsuanLeft, 100);
			}

			function jiJsuanLeft () {
				left = 500-Math.abs(parseInt($('.son').css('left')));
				baifenbi = Math.round(left/5);
				console.log(baifenbi);
				baifenbi +="%";
				$('.jindu').text(baifenbi);
			}
		})
	</script>
</head>
<body>
	<div class="father">
		<div class="son"></div>
		<div class="jindu">0%</div>
	</div>
	<input type="button" id="btn" value="开始">
</body>
</html>